// hotel-management-frontend/src/components/Layout.js

import React from 'react';
import { Layout, Menu } from 'antd'; // Button 已在代码中，但未从antd解构，此处修正
import { Link, useLocation } from 'react-router-dom';
import {
    DashboardOutlined,
    HomeOutlined,
    UserOutlined,
    CalendarOutlined,
    BarChartOutlined,
    UploadOutlined,
    BookOutlined,
    InfoCircleOutlined,
    SwapOutlined,
    ShoppingOutlined
} from '@ant-design/icons';

const { Header, Content, Sider } = Layout;

const AppLayout = ({ children, isAdmin }) => {
    const location = useLocation();

    const getSelectedKey = () => {
        if (isAdmin) {
            if (location.pathname.startsWith('/admin/dashboard')) return 'dashboard';
            if (location.pathname.startsWith('/admin/rooms')) return 'rooms';
            if (location.pathname.startsWith('/admin/guests')) return 'guests';
            if (location.pathname.startsWith('/admin/checkins')) return 'checkins';
            if (location.pathname.startsWith('/admin/statistics')) return 'statistics';
            if (location.pathname.startsWith('/admin/bulk-import')) return 'bulk-import';
            if (location.pathname.startsWith('/admin/menu-items')) return 'menu-items';
            return 'dashboard';
        } else {
            if (location.pathname.startsWith('/client/history') || location.pathname === '/') return 'client-history';
            if (location.pathname.startsWith('/client/profile')) return 'client-profile';
            return 'client-history';
        }
    };

    const adminMenuItems = [
        {
            key: 'dashboard',
            icon: <DashboardOutlined />,
            label: <Link to="/admin/dashboard">仪表盘</Link>,
        },
        {
            key: 'rooms',
            icon: <HomeOutlined />,
            label: <Link to="/admin/rooms">房间管理</Link>,
        },
        {
            key: 'guests',
            icon: <UserOutlined />,
            label: <Link to="/admin/guests">客户管理</Link>,
        },
        {
            key: 'checkins',
            icon: <CalendarOutlined />,
            label: <Link to="/admin/checkins">入住管理</Link>,
        },
        {
            key: 'statistics',
            icon: <BarChartOutlined />,
            label: <Link to="/admin/statistics">统计分析</Link>,
        },
        {
            key: 'bulk-import',
            icon: <UploadOutlined />,
            label: <Link to="/admin/bulk-import">批量导入</Link>,
        },
        {
            key: 'menu-items',
            icon: <ShoppingOutlined />,
            label: <Link to="/admin/menu-items">商品管理</Link>,
        },
    ];

    const clientMenuItems = [
        {
            key: 'client-history',
            icon: <BookOutlined />,
            label: <Link to="/client/history">我的历史</Link>,
        },
        {
            key: 'client-profile',
            icon: <InfoCircleOutlined />,
            label: <Link to="/client/profile">我的信息</Link>,
        },
    ];

    const switchModeItem = {
        key: 'switch-mode',
        icon: <SwapOutlined />,
        label: isAdmin ? (
            <Link to="/client/history">切换到客户界面</Link>
        ) : (
            <Link to="/admin/dashboard">切换到管理员界面</Link>
        ),
    };

    const currentMenuItems = isAdmin
        ? [...adminMenuItems, { type: 'divider' }, switchModeItem]
        : [...clientMenuItems, { type: 'divider' }, switchModeItem];

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={false}>
                <div className="demo-logo-vertical" />
                <Menu
                    theme="dark"
                    mode="inline"
                    selectedKeys={[getSelectedKey()]}
                    items={currentMenuItems}
                />
            </Sider>
            <Layout>
                {/* Updated headStyle to styles={{ header: ... }} for Antd v5 compatibility */}
                <Header styles={{ header: { padding: 0, background: '#fff' }}} >
                    <div style={{ float: 'right', marginRight: '24px' }}>
                        <span style={{ marginRight: '10px' }}>
                            {isAdmin ? '管理员模式' : '客户模式'}
                        </span>
                    </div>
                </Header>
                <Content style={{ margin: '0 16px' }}>
                    <div style={{ padding: 24, minHeight: 360, background: '#fff' }}>
                        {children}
                    </div>
                </Content>
            </Layout>
        </Layout>
    );
};

export default AppLayout;
